<template>
	<view class="sign">
		<view class="s_headr" @click="getSign">
			<view class="s_image">
				<image src="../../static/372.png" alt="">
			</view>
			<view class="s_text">
				坚持每天连续签到可以获得多重奖励哦
			</view>
		</view>
		<view class="b_box">
			<view class="b_text">
				已连续签到{{signList.cont_days}}天
			</view>

			<view class="flex">
				<view class="s_box" v-for="item in list">
					<view class="s_box1" v-if="item.status==0">
						<view class="s_image1">
							<image src="../../static/31.png" alt="">
						</view>
					</view>
					<view class="s_box1" v-else-if="item.status==1">
						<view class="s_image1">
							<image src="../../static/32.png" alt="">
						</view>
					</view>
					<view class="day">
						{{item.day}}
					</view>
				</view>
			</view>

			<view class="tips">
				<view class="flex1">
					<view class="t_image">
						<image src="../../static/33.png" alt="">
					</view>
					<view class="ti">
						温馨提示：
					</view>
				</view>
				<view class="t_text">
					每日签到可获得{{signList.day}}积分的奖励，连续完成{{signList.sign_day}}天
					签到可上额外获得奖励
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as Api from '@/api/recovery'
	export default {
		data() {
			return {
				list: [{
						day: '第一天',
						status: 1
					},
					{
						day: '第二天',
						status: 1
					},
					{
						day: '第三天',
						status: 1
					},
					{
						day: '第四天',
						status: 1
					}, {
						day: '第五天',
						status: 1
					}, {
						day: '第六天',
						status: 1
					}, {
						day: '第七天',
						status: 1
					}, {
						day: '第八天',
						status: 1
					},

				],
				signList: {}
			}
		},
		onLoad() {
			this.getSignList()
		},
		methods: {
			getSign() {
				Api.sign_log({})
					.then(result => {
						this.getSignList()
					})
					.finally()
			},
			getSignList() {
				Api.sign_list({})
					.then(result => {
						this.signList = result.data.list
						this.day=this.signList.cont_days
						this.list.forEach((item,index)=>{
							this.signList.data.forEach((i,j)=>{
								if(j==index){
									item.status=0
								}
							})
						})
					})
					.finally()
			}
		}
	}
</script>

<style scoped>
	.flex {
		display: flex;
		flex-wrap: wrap;
	}

	.flex1 {
		display: flex;
		align-items: center;
	}

	page {
		background: #F5F5F5;
	}

	.s_headr {
		height: 459rpx;
		padding: 80rpx;
		background: linear-gradient(0deg, #66B347 0%, #66B347 100%);
	}

	.b_box {
		padding: 70rpx 32rpx;
		background: #F5F5F5;
		border-radius: 50rpx 50rpx 0 0;
		margin-top: -40rpx;
	}

	.s_image {
		width: 179rpx;
		height: 179rpx;
		border-radius: 50%;
		margin: 0 auto;
	}

	.s_image image {
		width: 100%;
		height: 100%;
		margin: 0 auto;
	}

	.s_text {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		margin-top: 40rpx;
	}

	.b_text {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.s_box {
		width: 149rpx;
		height: 195rpx;
		background: rgba(102, 179, 71, 0.6);
		border-radius: 20rpx;
		margin: 10rpx;
	}

	.s_image1 {
		width: 65rpx;
		height: 65rpx;
		margin: 0 auto;
	}

	.s_image1 image {
		width: 100%;
		height: 100%;
	}

	.day {
		background-color: #FFFFFF;
		border-radius: 0 0 20rpx 20rpx;
		text-align: center;
		height: 50rpx;
		line-height: 50rpx;
	}

	.s_box1 {
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.tips {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 35rpx 20rpx;
		margin-top: 40rpx;
	}

	.t_text {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 0.8);
		line-height: 40rpx;
		margin-top: 20rpx;
	}

	.ti {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.t_image {
		width: 33rpx;
		height: 33rpx;
		margin-right: 20rpx;
	}

	.t_image image {
		width: 100%;
		height: 100%;
	}
</style>
